<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery</title>
    <style>
        div {
            border: red 1px solid;
            height: 400px;
            width: 400px;
            margin: 5px;
        }
    </style>
<!--  引入jQuery库-->
    <script src = "../js/jquery-1.11.0.min.js"></script>
<!--    编写js代码-->
    <script>
        //开始使用过jquery
        $(
            function (){
                //页面加载函数测试
                //alert("页面加载中...");

                //js对象div1
                var div1 = document.getElementById("div1");
                div1.innerText = "js对象初始化";
                div1.style.border = "blue 2px solid";
                //$(div1).text("js转jq")
                //jq对象div2
                var div2 = $("#div2");
                div2.text("jq对象初始化");
                //div2.get(0).innerText = "jq转js";
                div2.click(function (){
                    $(this).css({
                        width : function (index,value){return parseFloat(value) * 1.2;},
                        height : function (index,value){return parseFloat(value) * 1.2;}
                    });
                });
            }
        );
    </script>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
</body>
</html>